/* eslint-disable @typescript-eslint/no-shadow */
import { useSpring, animated } from '@react-spring/web'
import { useState, useEffect } from 'react'

import styles from './index.module.less'

export default function AnimationRotateX(props: { children: JSX.Element; active: boolean }) {
    const { children, active } = props
    const [current, setCurrent] = useState(0)
    const [cardsProps, setCardsProps] = useSpring(() => ({
        to: {
            opacity: 1,
            transform: 'perspective(600px) rotateX(0deg)',
        },
        from: {
            opacity: 1,
            transform: 'perspective(600px) rotateX(0deg)',
        },
        config: { mass: 5, tension: 500, friction: 100 },
    }))

    useEffect(() => {
        setCardsProps({
            to: {
                opacity: 1,
                transform: 'perspective(300px) rotateX(0deg)',
            },
            from: {
                opacity: 0,
                transform: 'perspective(300px) rotateX(180deg)',
            },
            reset: true,
        })
    }, [current, setCardsProps])

    useEffect(() => {
        const id = setTimeout(() => {
            setCurrent((current: number) => (current + 1) % 3)
        }, 0)
        return () => clearInterval(id)
    }, [active])

    return (
        <div className={styles.container} onClick={() => setCurrent((current: any) => (current + 1) % 3)}>
            <animated.div style={cardsProps}>{children}</animated.div>
        </div>
    )
}
